<template>
	<view class="box">
		<!-- 头部 -->
		<view class="top">上新公告</view>
		<!-- 公告view -->
		<view class="contents" v-for="item in newList" :key="item.id">
			<!-- 每个公告 -->
			<view class="contents-item">
				<!-- 左边 -->
				<view class="left">
					<!-- 公告内容 -->
					<view class="text">{{ item.sign}}</view>
					<!-- 上新公告 -->
					<view class="shang">{{ item.type }}</view>
					<!-- 时间 -->
					<view class="time">{{ item.time }}</view>
				</view>
				<!-- 右边 -->
				<image src="/static/shangxin.jpg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				// 公告列表
				newList: [],
			}
		},
		methods: {

		},
		onLoad() {
			// 获取公告数据
			api.getShopNews().then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
				// 获取成功
				this.newList = res.data.data.newList.reverse();
				uni.$showMsg(res.data.msg);
			})
		}
	}
</script>

<style>
	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	/* 公告view */
	.contents {
		width: 100%;
		height: 100%;
	}

	/* 每个公告 */
	.contents .contents-item {
		margin: 40rpx auto;
		border-radius: 10px;
		width: 95%;
		height: 250rpx;
		background: rgb(248, 250, 251);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	/* 左边 */
	.contents .contents-item .left {
		width: 430rpx;
		height: 176rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	/* 公告内容 */
	.contents .contents-item .text {
		font-size: 14px;
		margin-bottom: 8px;
	}

	/* 上新公告 */
	.shang {
		line-height: 18px;
		background: rgb(0, 0, 0);
		border-radius: 3px;
		padding: 0px 6px;
		font-size: 12px;
		color: rgb(255, 255, 255);
		margin-bottom: 8px;
	}

	.time {
		font-size: 11px;
		color: rgb(180, 180, 180);
	}

	/* 右边 */
	image {
		width: 106px;
		height: 75px;
		border-radius: 6px;
	}
</style>